<template>
	<view class="page">
		<view class="service-requirement">
			<view class="requirement-title">信息采集模板</view>
			<textarea class="textarea" v-model="content" placeholder-style="color:#C3C3C3"
				placeholder="请输入信息采集模板" auto-height @blur="onTextAreaBlur"></textarea>
		</view>
		<view class="treatment-list">
			<view class="treatment-item">
				<view class="treatment-title">服务项目：</view>
				<input class="treatment-tip" v-model="serviceName" placeholder-style="font-size:28rpx"
					placeholder="请填写服务项目"/>
			</view>
		</view>
		<view class="head-title">就诊人：</view>
		<view class="treatment-list">
			<view class="treatment-item">
				<view class="treatment-title">姓名：</view>
				<input class="treatment-tip" v-model="patientName" placeholder-style="font-size:28rpx"
					placeholder="请填写就诊人姓名"/>
			</view>
			<view class="treatment-item">
				<view class="treatment-title">性别：</view>
				<input class="treatment-tip" v-model="patientSex" placeholder-style="font-size:28rpx"
					placeholder="请填写就诊人性别"/>
			</view>
			<view class="treatment-item">
				<view class="treatment-title">身份证号：</view>
				<input class="treatment-tip" v-model="idcard" placeholder-style="font-size:28rpx"
					placeholder="请填写就诊人身份证号" type="number"/>
			</view>
			<view class="treatment-item">
				<view class="treatment-title">手机号：</view>
				<input class="treatment-tip" v-model="phone" placeholder-style="font-size:28rpx"
					placeholder="请填写就诊人手机号" type="number"/>
			</view>
			<view class="treatment-item">
				<view class="treatment-title">就诊医院：</view>
				<input class="treatment-tip" v-model="hospitalName" placeholder-style="font-size:28rpx"
					placeholder="请填写就诊医院"/>
			</view>
			<view class="treatment-item">
				<view class="treatment-title">计划服务时间：</view>
				<input class="treatment-tip" v-model="treatmentTime" placeholder-style="font-size:28rpx"
					placeholder="请填写计划服务时间"/>
			</view>
			<view class="treatment-item">
				<view class="treatment-title">服务需求：</view>
				<input class="treatment-tip" v-model="serviceRequirements" placeholder-style="font-size:28rpx"
					placeholder="请填写服务需求"/>
			</view>
		</view>
		<view class="head-title">下单人：</view>
		<view class="treatment-list">
			<view class="treatment-item">
				<view class="treatment-title">uid：</view>
				<input class="treatment-tip" v-model="userUid" placeholder-style="font-size:28rpx"
					placeholder="请填写下单人uid"/>
			</view>
			<view class="treatment-item">
				<view class="treatment-title">姓名：</view>
				<input class="treatment-tip" v-model="userName" placeholder-style="font-size:28rpx"
					placeholder="请填写下单人姓名"/>
			</view>
			<view class="treatment-item">
				<view class="treatment-title">手机号：</view>
				<input class="treatment-tip" v-model="userPhone" placeholder-style="font-size:28rpx"
					placeholder="请填写下单人手机号" type="number"/>
			</view>
		</view>
		<view class="operation">
			<button class="btn" type="default" size="mini">保存</button>
			<button class="btn" plain type="primary" size="mini">发送给客户</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			content: '',
			serviceName: '',
			patientName: '',
			patientSex: '',
			idcard: '',
			phone: '',
			hospitalName: '',
			treatmentTime: '',
			serviceRequirements: '',
			userUid: '',
			userName: '',
			userPhone: ''
		}
	},
	methods: {
		onTextAreaBlur: function(e) {
			const arr = e.detail.value.split(/\n+/)
			const result = {}
			let curKey = ""
			arr.forEach(str => {
				if(str) {
					const items = str.split(/[：|:]\s*/)
					if(!items[1]) {
						curKey = items[0].trim()
						if(curKey.trim()) {
							result[curKey] = result[curKey] || {}
						}
					} else if(items[0].trim() && items[1].trim()) {
						if(curKey) {
							result[curKey][items[0]] = items[1]
						} else {
							result[items[0]] = items[1]
						}
					}
				}
			})
			console.log(result)
			const patientInfo = result['就诊人信息']
			const userInfo = result['下单人信息']
			this.serviceName = result['服务项目']
			if(patientInfo) {
				this.patientName = patientInfo['姓名']
				this.patientSex = patientInfo['性别']
				this.idcard = patientInfo['身份证号']
				this.phone = patientInfo['手机号']
				this.hospitalName = patientInfo['就诊医院']
				this.treatmentTime = patientInfo['计划服务时间']
				this.serviceRequirements = patientInfo['服务需求']
			}
			if(userInfo) {
				this.userName = userInfo['姓名']
				this.userPhone = userInfo['手机号']
			}
		},
	}
}
</script>

<style scoped lang="scss">
.page {
	background-color: #f2f2f2;
	height: 100%;
	min-height: 100vh;
	.operation {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
		padding: 10px;
		margin-top: 20rpx;
		background-color: #fff;
		.btn {
			flex: 1;
		}
	}
	.head-title {
		padding-left: 20rpx;
		padding-top: 20rpx;
		color: #999;
		font-size: 34rpx;
	}
	.treatment-list {
		margin-top: 20rpx;
		background-color: #fff;
	
		.treatment-item {
			padding: 30rpx;
			border-bottom: 2rpx solid #e8e8e8;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			.treatment-title {
				flex-shrink: 0;
				font-size: 30rpx;
			}
	
			.treatment-info {
				display: flex;
				align-items: center;
	
				.treatment-tip {
					color: #999999;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
	
					&.active {
						color: #333333;
					}
				}
	
				.service-icon {
					flex-shrink: 0;
					margin-left: 8rpx;
					height: 26rpx;
					width: 16rpx;
				}
			}
	
			input {
				flex: 1;
				text-align: right;
			}
		}
	}
	.service-requirement {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;
	
		.requirement-title {
			font-size: 30rpx;
			padding-bottom: 16rpx;
		}
	
		.textarea {
			width: 100%;
			min-height: 250rpx;
			font-size: 28rpx;
		}
	}
}
</style>